<template>
  <div class="mas">
    <div class="con_bk" :style="cbStyle">
      <!-- <vue-tabbar-slide :options="options" @callback="tabClick"></vue-tabbar-slide> -->
      <lxr-tab
        v-model="data.currentIndex"
        :items="data.content"
        :options="options"
        :key="rk">
      </lxr-tab>

      <div class="goods" :style="goodsStyle" >
        <ul :class="goodListClass">
          <li class="good-box" :style="'border-radius:' + data.config.radius / 2 + 'px'" v-for="(item,i) in data.content[data.currentIndex].data[data.content[data.currentIndex].type].list.slice(0,data.content[data.currentIndex].data[data.content[data.currentIndex].type].limit)" :key="i">
            <div class="good-box-item" :style="'background:' + data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.product.probg + '; border-radius: 0px;'">
              <div class="img-box">
                <div class="good-img-box">
                  <vimage mode="widthFix" lazy-load="" :src="item.master" alt="" class="good-img" draggable="false"></vimage>
                </div>
                <p class="title" v-show="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.type != 'list'" :style="'color:' + data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.product.titleColor + ';'">{{item.name}}</p>
              </div>
              <div class="box-bottom" v-show="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.type != 'list'">
                <div class="price">
                  <span class="pro-price" v-show="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.sell_price.show" :style="'color:' + data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.sell_price.color + ';'">    <template v-if="item.type=='2'">
                  <i>{{ item.has_sku ? item.min_price : item.sell_price }}</i>积分
                </template>
                <template v-else>
                  ￥
                  <i>{{ item.has_sku ? item.min_price : item.sell_price }}</i>
                </template></span>
                  <span class="del-price" v-show="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.line_price.show">
                    <i class="del-icon" :style="'color:' + data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.line_price.color + ';'">{{data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.line_price.text}}</i>
                    <i class="del-num" :style="'color:' + data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.line_price.color + ';'">￥{{item.original_price}}</i>
                  </span>
                </div>
                <div class="btn">
                  <span v-show="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.add_button.show" class="buybtn-icon buybtn iconfont-m- icon-m-buy1"><i  :style="'font-size:20px;color:' + data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.add_button.color + ';'" :class="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.add_button.icon+' iconfont'"></i></span>
                  <span class="sales-num" v-show="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.sell_total.show" :style="'color:' + data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.sell_total.color + ';'">{{data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.sell_total.text}}:{{item.sell}}</span>
                </div>
              </div>
              <div class="right van-hairline--bottom" v-show="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.type == 'list'">
                <div>
                  <p class="title" :style="'color:' + data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.product.titleColor + ';'">{{item.name}}</p>
                  <p class="subtitle">{{item.subtitle}}</p>
                </div>
                <div class="right-bottom">
                  <div class="price">
                    <span class="pro-price" v-show="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.sell_price.show" :style="'color:' + data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.sell_price.color + ';'">    <template v-if="item.type=='2'">
                  <i>{{ item.has_sku ? item.min_price : item.sell_price }}</i>积分
                </template>
                <template v-else>
                  ￥
                  <i>{{ item.has_sku ? item.min_price : item.sell_price }}</i>
                </template></span>
                    <span class="del-price" v-show="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.line_price.show">
                      <i class="del-icon" :style="'color:' + data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.line_price.color + ';'">{{data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.line_price.text}}</i>
                      <i class="del-num" :style="'color:' + data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.line_price.color + ';'">￥{{item.original_price}}</i>
                    </span>
                  </div>
                  <div class="btn">
                    <span v-show="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.add_button.show" class="buybtn-icon buybtn iconfont-m- icon-m-buy1"><i :style="'font-size:20px;color:' + data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.add_button.color + ';'" :class="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.add_button.icon+' iconfont'"></i></span>
                    <span class="sales-num" v-show="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.sell_total.show" :style="'color:' + data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.sell_total.color + ';'">{{data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.sell_total.text}}:{{item.sell}}</span>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>

    </div>



    <!-- <div class="bks" v-show="activeIndex == 0">1</div> -->
    <!-- <div class="plist">
      <div class="bks" v-for="(item,i) in data.content" :key="i">{{item.name}}</div>
    </div> -->
  </div>
</template>

<script>
import Vue from 'vue';
import LxrTab from 'lxr-tab'
Vue.use(LxrTab)

export default {
  data(){
    return {
      rk:1,
      //selectedId: 0,
      //items: [],
      options: {
        labelKey:'name'
      },
      currentData:{}
    }
  },
  props: {
    data: {
      type: Object,
      default: function(){
        return {};
      }
    }
  },
  components:{},
  created(){
    //this.items = this.data.tabs;
    this.options.normalColor = this.data.config.color.normal;
    this.options.activeColor = this.data.config.color.active;
    this.options.tabHeight = this.data.config.tabHeight + 'px';
  },
  computed: {
    goodListClass(){
      return 'goods-list block ' + this.data.content[this.data.currentIndex].data[this.data.content[this.data.currentIndex].type].config.type;
    },
    goodsStyle(){
      let s = 'margin-top:' + this.data.config.marigin.ic / 2  + 'px;';
        s += 'padding:0 ' + this.data.config.marigin.lr / 2 + 'px';
      return s;
    },
    cbStyle(){
      let s = 'margin-top:' + this.data.config.marigin.top + 'px;margin-bottom:' + this.data.config.marigin.bottom + 'px;';
      return s;
    }
  },
  watch:{
    'data.content':{
      handler:function(){
        //监听标签数量变化
        //this.items = data.content;
      },
      deep:false
    },
    'data.config':{
      handler:function(){
        // //监听组件设置变化
        this.options.normalColor = this.data.config.color.normal;
        this.options.activeColor = this.data.config.color.active;
        this.options.tabHeight = this.data.config.tabHeight + 'px';
        this.rk++;
      },
      deep:true
    }
  },
  methods:{

  }

}
</script>

<style lang="scss" scoped>
.lxr-tab{
  background: #fff;
}

.tabHead{
  .swiper-slide {
    color: #f00 !important;
  }
}

.mas{
  width: 100%;
  overflow: auto;
  pointer-events: none;
  cursor: default;
  //opacity: .6;
}

.con_bk{
  width: 100%;
  overflow: hidden;
}

.goods {
    width: 100%;
    overflow: auto;
    //padding: 8px 12px 0;
    padding: 8px 0 0;

    i {
      font-style: normal;
    }

    .goods-list {
      display: flex;
      flex-wrap: wrap;
      overflow: auto;
      min-width: 100%;
      box-sizing: border-box;
      padding-left: 0;
      //background: #fff;

      .good-box {
        flex-shrink: 0;
        overflow: hidden;

        .good-box-item {
          overflow: hidden;
        }

        .img-box {
          overflow: hidden;
          position: relative;

          .good-img-box {
            position: relative;
            overflow: hidden;

            .good-img {
              width: 100%;
              display: block;
            }
          }
        }

        .title {
          width: 100%;
          box-sizing: border-box;
          color: #212121;
          font-family: PingFang SC;
          font-style: normal;
          font-weight: normal;
          font-size: 14px;
          line-height: 20px;
          max-height: 40px;
          padding: 0 8px;
          margin: 8px 0 4px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }

        .box-bottom {

          width: 100%;
          display: flex;
          box-sizing: border-box;


        }

        .btn {
          display: flex;
          flex-direction: column;
          margin: 0;

          .buybtn {
            font-size: 24px;
            height: 24px;
            line-height: 24px;
            text-align: right;
          }

          .sales-num {
            height: 14px;
            font-size: 10px;
            line-height: 14px;
            color: #969696;
            text-align: right;
          }
        }
        .price {
          display: flex;
          flex-direction: column;

          .pro-price {
            height: 24px;
            box-sizing: border-box;
            font-size: 12px;
            line-height: 17px;

            i {
              margin-right: 3px;
              font-size: 14px;
              height: 24px;
              line-height: 24px;
              text-overflow: ellipsis;
              box-sizing: border-box;
              white-space: nowrap;
              overflow: hidden;
              font-style: normal;
              font-weight: bold;
            }
          }

          .del-price {
            display: flex;
            align-items: center;
            height: 14px;
            line-height: 14px;

            .del-icon {
              display: inline-block;
              color: #969696;
              font-size: 10px;
              height: 14px;
              line-height: 14px;
            }

            .del-num {
              display: inline-block;
              color: #969696;
              font-size: 10px;
              height: 14px;
              line-height: 14px;
              text-decoration: line-through;
            }
          }
        }
      }

      &.block {
        &.one .good-box {
          width: 100%;

          .good-box-item {
            padding-bottom: 8px;

            .good-img-box {
              height: 161px;
            }
          }
        }

        &.one .good-box:nth-child(n+2) {
          margin-top: 8px;
        }

        &.two .good-box {
          width: 50%;

          .good-box-item {
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .good-img-box {
              height: 172px;
            }
          }
        }

        &.two .good-box:nth-child(odd) {
          padding-right: 4px;
        }
        &.two .good-box:nth-child(even) {
          padding-left: 4px;
        }
        &.two .good-box:nth-child(n+3) {
          margin: 8px 0 0;
        }

        &.three {
          .good-box {
            width: 33.33%;

            .del-price,
            .sales-num {
              display: none;
            }

            .good-img-box {
              height: 112px;
              margin-bottom: 8px;
            }

          }

          .good-box:nth-child(n+4) {
            margin: 8px 0 0;
          }

          .good-box:nth-child(3n-1),
          .good-box:nth-child(3n) {
            padding-left: 4px;
          }

          .good-box:nth-child(3n-2),
          .good-box:nth-child(3n-1) {
            padding-right: 4px;
          }
        }

        .box-bottom {
          padding: 0 8px 8px;
          justify-content: space-between;
        }
      }

      &.list .good-box {
        border-radius: 0;
        width: 100%;
        margin: 0 auto;
        flex-direction: row;
        padding: 8px 12px 0;
        background: #fff;

        .right {
          height: 140px;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding-bottom: 8px;
          box-sizing: content-box;
          overflow: hidden;
          .title{
              margin-top: 0;
              padding: 0;
          }
          .subtitle{
              font-family: PingFang SC;
              font-style: normal;
              font-weight: normal;
              font-size: 12px;
              line-height: 17px;
              color: #969696;
              padding: 0;
              margin-bottom: 11px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 100%;
              box-sizing: border-box;
          }
          .right-bottom{
              display: flex;
              flex-wrap: nowrap;
              justify-content: space-between;
              margin-bottom: 0;

             .price{
                  display: flex;
                  flex-direction: column;
                 .pro-price{
                      height: 24px;
                  }
              }
          }
        }

        .good-box-item {
          display: flex;
        }

        .img-box {
          width: 140.47231px;
          height: 140.47231px;
          -ms-flex-negative: 0;
          flex-shrink: 0;
          margin-right: 8px;

          .good-img-box {
            height: 100%;
            display: block;

            .good-img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

    }
  }


</style>
